<template>
    <view id="main">
        <view class="card">
            <view class="title fs_18 color_black">废物信息新增</view>
            <view class="form_item">
                <view class="label">
                    <view class="tag">*</view>
                    <view class="text">废物名称</view>
                </view>
                <view @tap="chooseWate" class="handle_box flex">
                    <input value="" placeholder="请选择" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                    <uni-icons type="right" color="#1D2541" size="20" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">危废类别</view>
                </view>
                <view class="handle_box flex">
                    <input placeholder="请输入" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">废物代码</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="选择输入相关设备MAC地址" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">危险特性</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="选择输入相关设备MAC地址" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="tag">*</view>
                    <view class="text">容器/包装类型</view>
                </view>
                <view @tap="showPopup" class="handle_box flex">
                    <input value="" placeholder="请选择" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                    <uni-icons type="right" color="#1D2541" size="20" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">类型描述</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="容器/包装类型为其他时必填" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">主要成分</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">有害成分</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">注意事项</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
            <!-- <view class="text_area form_item">
                <view class="label">
                    <view class="text">说明</view>
                </view>
                <textarea placeholder="请输入" placeholder-style="color: #CCCCD3;font-size:14px" />
            </view> -->
        </view>
        <view class="card">
            <view class="title fs_18 color_black">产生信息</view>
            <view class="form_item datetime">
                <view class="label">
                    <view class="tag">*</view>
                    <view class="text">产生日期</view>
                </view>

                <uni-datetime-picker @change="handleDateChange" type="datetime" v-model="datetimesingle">
                    <view class="handle_box datetime flex">
                        <input value="" placeholder="请选择" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                        <uni-icons type="right" color="#1D2541" size="20" />
                    </view>
                </uni-datetime-picker>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="tag">*</view>
                    <view class="text">废物重量(kg)</view>
                </view>
                <view @tap="goweighbridge" class="handle_box flex">
                    <input value="" placeholder="称重" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                    <uni-icons type="right" color="#1D2541" size="20" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="tag">*</view>
                    <view class="text">产生设施</view>
                </view>
                <view @tap="goChooseFacility" class="handle_box flex">
                    <input value="" placeholder="请选择" disabled placeholder-style="color: #CCCCD3;font-size:14px" />
                    <uni-icons type="right" color="#1D2541" size="20" />
                </view>
            </view>
            <view class="form_item">
                <view class="label">
                    <view class="text">产生部门经办人</view>
                </view>
                <view class="handle_box flex">
                    <input value="" placeholder="请输入" placeholder-style="color: #CCCCD3;font-size:14px" />
                </view>
            </view>
        </view>
        <!-- 保存 -->
        <view class="footer">
            <view class="button"> 提交 </view>
        </view>
        <!-- popup -->
        <uni-popup ref="popup" type="bottom">
            <view class="popup_content">
                <view class="popup_title fs_16">选择设备类型</view>
                <view class="popup_body">
                    <view class="popup_item">桶</view>
                    <view class="popup_item active">罐</view>
                    <view class="popup_item">袋</view>
                </view>
                <view class="popup_footer flex ">
                    <zy-btn color="#0077FF" backgroundColor="#F7F7F7">
                        取消
                    </zy-btn>
                    <zy-btn backgroundColor="#1858E6">确定</zy-btn>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts" setup>
const goweighbridge = () => {
    uni.navigateTo({
        url: '/pages/weighbridge/index'
    })
}
const chooseWate = () => {
    uni.navigateTo({
        url: '/pages/index/reg/addreg/choosewaste/choosewaste'
    })
}
const goChooseFacility = () => {
    uni.navigateTo({
        url: '/pages/index/reg/addreg/chosefacility/chosefacility'
    })
}
// 时间
const datetimesingle = ref('')
const handleDateChange = (e: any) => {
    console.log('handleDateChange', e)
    handleCheckStore.checkData.AddTime = e || ''
}
// 弹窗
const popup = ref<any>(null)
const showPopup = () => {
    popup.value.open()
}
</script>

<style lang="scss" scoped>
#main {
    position: relative;
}

.card {
    width: 95%;
    margin: 20px auto 0;

    .title {
        margin-bottom: 20px;
    }

    .form_item {
        margin-bottom: 6px;
        border-bottom: 0.5px solid rgb(226, 227, 235);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;

        &.datetime {
            .handle_box {
                width: 100%;
            }
        }

        &.text_area {
            flex-direction: column;
            align-items: flex-start;
            border: 0;

            .label {
                margin-bottom: 14px;
            }
        }

        .label {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #2e323d;
            white-space: nowrap;
            width: 30%;

            .tag {
                margin-right: 5px;
                color: #E14146;
            }
        }

        .handle_box {
            justify-content: space-between;
            width: 70%;
        }
    }

    textarea {
        background-color: #F7F8F9;
        padding: 10px;
        width: 100%;
    }
}

.footer {
    width: 95%;
    margin: 20px auto;

    .button {
        border-radius: 4px;
        background-color: #1858E6 !important;
    }
}

//弹窗样式
.popup_content {
    position: relative;
    padding: 20px;
    height: 300px;
    border-radius: 11px 11px 0px 0px;
    background: #fff;

    .popup_body {
        text-align: center;
        height: 70%;
        display: flex;
        flex-direction: column;

        justify-content: space-around;

        .popup_item {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.3);
        }

        .popup_item.active {
            color: #000;
            font-size: 17px;
        }
    }

    .popup_footer {

        justify-content: center;

        .zk_btn {
            justify-content: center;
            margin: 0 12px;
            width: 30%;
        }
    }
}
</style>
